<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <h2>注册</h2>
    <p class="tiaokuan">
      登录注册表示同意
      <a href>花粉儿条款与规范</a>
    </p>

    <van-cell-group>
      <van-field required clearable v-model="phone" center clearable left-icon="contact" placeholder="请输入用户名">
      </van-field>
      <van-field required clearable v-model="sms" type="password" left-icon="certificate" placeholder="请输入密码" />
      <van-field required clearable left-icon="user-circle-o" v-model="value" placeholder="请输入昵称" />
    </van-cell-group>
    <!-- 上传头像 -->

    <van-uploader
      v-model="fileList"
      multiple
      :max-count="1"
      class="tx"
      upload-text="上传头像"
    />

    <van-button to="/login" class="yy" type="primary" size="mini">去登录</van-button>
    <van-button class="btn" @click="register" size="large" color="#ff6678">注册</van-button>


  </div>
</template>
<script>
  import * as api from '@/api/postProList';
export default {
  name:'register',
  data() {
    return {
      phone: "",
      sms: "",
      value:'',
      fileList:[]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    register() {
      let password = this.$md5(this.sms)
      if(this.phone=="" || password=="" || this.value==""){
        this.$dialog.alert({
          title: '用户名或密码错误',
        }).then(() => {
          // on close
        });
      }
      if(this.fileList.length == 0){
        this.fileList[0]={
          content:"https://img.yzcdn.cn/vant/leaf.jpg"
        }
      }
      api.register({
        userName:this.phone,
        password:password,
        nickName:this.value,
        avatar:this.fileList[0].content
      }).then(res=>{
        if(res.data.code == 'success'){
          this.$toast('注册成功')
          this.$router.push("/login");
        }else{
          console.log(res.data)
        }
      })
    },
    showPopup() {
      this.show = true;
    },
  },
  mounted () {
    this.fileList=[]
  }
}
</script>
<style scoped>
h2 {
  font-size: 22px;
  font-weight: 500;
  margin-left: -245px;
  margin-top: 10px;
}
.tiaokuan {
  font-size: 14px;
  margin-left: -60px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tiaokuan a {
  display: inline;
  color: #7795c3;
}
.yy {
  display: block;
  border: 0;
  background: none;
  color: #7795c3;
  font-size: 12px;
  margin-left: 15px;
  margin-top: 5px;
}
.btn {
  width: 280px;
  height: 35px;
  border-radius: 20px;
  margin-top: 35px;
  font-size: 14px;
  line-height: 0;
}
.hq {
  background: #fff;
  color: #ff6678;
  border: 1px solid #ff6678;
}
.tx{
  margin-left: -220px;
}
</style>
